iT邦幫忙

1

JS30 Day 12 - Key Sequence Detection學習筆記

  • 分享至 

  • xImage
  •  

今天要來做的功能是,按下指定鍵盤按鍵,就會輸出彩蛋。
而我們設置的彩蛋按鈕是,上上下下左右左右BABA。

成果如下圖:
https://ithelp.ithome.com.tw/upload/images/20200617/20126182wD91u4p4fK.png

首先,我們先創建彩蛋的code,也就是指定要按下按鍵,要得知按鍵的keyCode的話,我們必須先在window下新增一個keyup事件,這樣就可獲取對應按鍵的keyCode,並且設置一個空陣列來放置我們按下的按鍵。

      // 設置一個彩蛋code
      const secretCode = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
      // 空陣列
      const input = [];

而我們利用push將按下的按鍵keyCode給push進去,然後再利用join去將陣列拼接成字串,再進行比對,如果input的keyCode = 彩蛋的keyCode,那就呼叫外部的Js產生獨角獸。

      // 給予視窗增添鍵盤事件
      window.addEventListener('keyup', (e) => {
        console.log(e.keyCode);
        input.push(e.keyCode);
        
        if (input.join('') === secretCode.join('')) {
          console.log("Ding Ding");
          cornify_add();
        }

當我們成功進去一次,就無法再次成功了,因為陣列的資料會不斷增加以致比對失敗,所以我們要在每次超過長度後移除元素,來保持兩個陣列的數量相同,此處利用shift,當超過時,就移除第一個元素,並且我們新添加的元素會在最後一位。

        // if (input.length > secretCode.length) {
        //   input.shift();
        //   console.log(input);
        // }

而原作者是利用splice去切掉多餘的元素。
splice(起始位置,數量) 而負的就視為0,所以到input內的資料數量到10之前都不會有動作,直到超過10(11-10=1),而我們起始位置-11的部分,也能以0代替。

        input.splice(-secretCode.length - 1, input.length - secretCode.length);

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言